import 'package:bobang/extension/widget_ext.dart';
import 'package:bobang/pages/home/home_cl.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ProductView extends GetResponsiveView<HomeController> {
  ProductView({super.key});

  @override
  Widget builder() {
    final types = ['型号', '规格'];
    return Row(
      children: [
        ListView.builder(
          shrinkWrap: true,
          itemBuilder: (_, index) {
            final item = types[index];
            return TextButton(onPressed: () {}, child: Text(item));
          },
          itemCount: types.length,
        ).sizedBox(width: Get.width * 0.2),
        Expanded(child: _buildItemList())
      ],
    );
  }

  Widget _buildItemList() {
    if (screen.isPhone) {
      return ListView.separated(
        shrinkWrap: true,
        padding: EdgeInsets.all(10),
        itemBuilder: (_, index) {
          final item = controller.data[index % controller.data.length];
          return _buildItem(item).card();
        },
        itemCount: controller.data.length * 5,
        separatorBuilder: (BuildContext context, int index) => const Divider(
          height: 10,
        ),
      );
    }
    return GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            mainAxisSpacing: 20,
            crossAxisSpacing: 20,
            childAspectRatio: 24 / 9,
            crossAxisCount: 4),
        shrinkWrap: true,
        itemCount: controller.data.length * 5,
        itemBuilder: (_, index) {
          final item = controller.data[index % controller.data.length];
          return _buildItem(item).card();
        });
  }

  Widget _buildItem(Map<String, String> item) {
    return LayoutBuilder(builder: (context, box) {
      return Row(
        // mainAxisAlignment: MainAxisAlignment.center,
        // crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.network(
            '${item['img']}',
            fit: BoxFit.cover,
            // height: 100,
            width: box.maxWidth * 0.2,
            height: box.maxWidth * 0.2,
          ).card(clipBehavior: Clip.antiAlias),
          const Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('产品'),
              Text('型号'),
              Text('规格'),
              Text('颜色'),
            ],
          ))
        ],
      );
    });
  }
}
